<template>
    <div class="container">
        <div class="main-box">
            <van-row v-for="(item, i) in bgImages" :key="i" class="van-row">
                <van-col span="6">
                    <div class="col-category" :style="item"></div>
                </van-col>
                <van-col span="6" class="van-col-content">
                    <div class="col-content" :style="backgroundColor[i]">
                        <div class="col-content-img">
                            <img :src="content[i].imagePath1" alt="">
                        </div>
                        <span>{{content[i].name1}}</span>
                    </div>
                </van-col>
                <van-col span="6" class="van-col-content">
                    <div class="col-content" :style="backgroundColor[i]">
                        <div class="col-content-img">
                            <img :src="content[i].imagePath2" alt="">
                        </div>
                        <span>{{content[i].name2}}</span>
                    </div>
                </van-col>
                <van-col span="6" class="van-col-content">
                    <div class="col-content" :style="backgroundColor[i]">
                        <div class="col-content-img">
                            <img :src="content[i].imagePath3" alt="">
                        </div>
                        <span>{{content[i].name3}}</span>
                    </div>
                </van-col>
            </van-row>
        </div>
        <!-- <div class="box-2">
            <div class="item-box" v-for="(item, i) in box_2" :key="i">
                <div class="image-box">
                    <img v-lazy="item.imagePath" alt="">
                </div>
                <span>{{item.name}}</span>
            </div>
        </div> -->
        <van-grid :column-num="5">
            <van-grid-item v-for="(item, i) in box_2" :key="i" :text="item.imagePath">
                <van-image :src="item.imagePath" />
                <span>{{item.name}}</span>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script>

import { Row, Col, Grid, GridItem, Image } from 'vant'

// import { picture1, picture2, picture3, name } from '../../assets/js/importImages.js'
import picture1 from '../../assets/icon/aaa.png'
import picture2 from '../../assets/icon/bbb.png'
import picture3 from '../../assets/icon/ccc.png'
import contentImg1 from '../../assets/icon/minsu.png'
import contentImg2 from '../../assets/icon/hotel.png'
import contentImg3 from '../../assets/icon/yushou.png'
import contentImg4 from '../../assets/icon/huoche.png'
import contentImg5 from '../../assets/icon/qiche.png'
import contentImg6 from '../../assets/icon/zhuanche.png'
import contentImg7 from '../../assets/icon/scenicSpot.png'
import contentImg8 from '../../assets/icon/gonglve.png'
import contentImg9 from '../../assets/icon/week.png'

import boxImg1 from '../../assets/icon_2/shangcheng.png'
import boxImg2 from '../../assets/icon_2/xuesheng.png'
import boxImg3 from '../../assets/icon_2/zhoubianyou.png'
import boxImg4 from '../../assets/icon_2/zhuanqian.png'
import boxImg5 from '../../assets/icon_2/xinyongdai.png'
import boxImg6 from '../../assets/icon_2/jipiao.png'
import boxImg7 from '../../assets/icon_2/zijia.png'
import boxImg8 from '../../assets/icon_2/zijia.png'
import boxImg9 from '../../assets/icon_2/jieqian.png'
import boxImg10 from '../../assets/icon_2/gengduo.png'

export default {
    name: 'vanhomemain',
    components: {
        VanRow: Row,
        VanCol: Col,
        VanGrid: Grid,
        VanGridItem: GridItem,
        VanImage: Image
    },
    data () {
        return {
            bgImages: [
                {
                    backgroundImage: `url(${picture1})`,
                    backgroundSize: '100% 100%'
                },
                 {
                    backgroundImage: `url(${picture2})`,
                    backgroundSize: '100% 100%' 
                }, 
                 {
                    backgroundImage: `url(${picture3})`,
                    backgroundSize: '100% 100%' 
                }
            ],
            backgroundColor: [
                { backgroundColor: '#ffefe2'},
                { backgroundColor: '#dfeffd'},
                { backgroundColor: '#daf7f5'}
            ],
            content: [
                {
                    imagePath1: contentImg1,
                    imagePath2: contentImg2,
                    imagePath3: contentImg3,
                    name1: '民宿 短租',
                    name2: '海外酒店',
                    name3: '酒店预售'
                },
                {
                    imagePath1: contentImg4,
                    imagePath2: contentImg5,
                    imagePath3: contentImg6,
                    name1: '火车票',
                    name2: '汽车 船票',
                    name3: '专车 租车'
                },
                {
                    imagePath1: contentImg7,
                    imagePath2: contentImg8,
                    imagePath3: contentImg9,
                    name1: '景点 门票',
                    name2: '攻略社区',
                    name3: '周末游'
                }
            ],
            box_2: [
                {
                    imagePath: boxImg1,
                    name: '旅行商城'
                },
                {
                    imagePath: boxImg2,
                    name: '学生专区'
                },
                {
                    imagePath: boxImg3,
                    name: '周边游'
                },
                {
                    imagePath: boxImg4,
                    name: '财富-赚钱'
                },
                {
                    imagePath: boxImg5,
                    name: '信用贷'
                },
                {
                    imagePath: boxImg6,
                    name: '低价机票'
                },
                {
                    imagePath: boxImg7,
                    name: '自驾-租车'
                },
                {
                    imagePath: boxImg8,
                    name: '接送机-包车'
                },
                {
                    imagePath: boxImg9,
                    name: '借钱分期'
                },
                {
                    imagePath: boxImg10,
                    name: '更多'
                }
            ]
        }
    },
    mounted () {
       
    },
    methods: {

    }

}
</script>

<style lang="less" scoped>
    .container {
        display: flex;
        flex-direction: column;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: white;
        .main-box {
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            overflow: hidden;
            .col-category {
                width: 100%;
                height: 70px;
                color: white;
            }
            .van-col-content {
                padding-left: 2px;
                background-color: white;
                .col-content {
                    width: 100%;
                    height: 70px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .col-content-img {
                        width: 30px;
                        height: 30px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    span {
                        margin-top: 3px;
                        font-size: 15px;
                        font-weight: 700;
                    }
                }
            }
        }
        // .box-2 {
        //     // margin-top: 10px;
        //     display: flex;
        //     flex-wrap: wrap;
        //     .item-box {
        //         width: 20%;
        //         display: flex;
        //         flex-direction: column;
        //         align-items: center;
        //         padding-top: 10px;
        //         .image-box {
        //             width: 30px;
        //             height: 30px;
        //             img {
        //                 width: 100%;
        //                 height: 100%;
        //             }
        //         }
        //         span {
        //             margin-top: 5px;
        //             font-size: 10px;
        //         }
        //     }
        // }
        /deep/.van-image__img {
            width: 30px;
            height: 30px;
        }
        /deep/ .van-grid-item__content {
            padding-left: 0;
            padding-right: 0;
            span {
                font-size: 10px;
            }
        }
        /deep/ .van-grid-item__content::after {
            border-width: 0;
        }
    }
    .van-row {
        margin-top: 2px;
    }
</style>